<template>
    <el-row>
        <el-form-item label="发布范围" required>
            <el-col :span="24">
                <el-checkbox label="普发" v-model="articleData.ordinaryPub"
                    :disabled="articleData.checkList.length > 0 ? true : false"></el-checkbox>
            </el-col>
            <el-checkbox-group v-model="articleData.checkList">
                <div>
                    <el-col :span="!isDeptShow ? 24 : 2">
                        <el-checkbox label="指定单位" @change="checkSecondDept" name="checkList"></el-checkbox>
                    </el-col>
                    <!--  -->
                    <el-col :span="22" v-show="isDeptShow">
                        <el-input v-model="articleData.DeptName" placeholder="双击选择单位"
                            @dblclick.native="dblclickRangeType('dept')" readonly unselectable="on">
                            <!-- <img slot="suffix" :src="rangeImage" /> -->
                        </el-input>
                    </el-col>
                </div>
                <div>
                    <el-col :span="!isEmpChange ? 24 : 2">
                        <el-checkbox label="指定员工" @change="checkEmp" name="checkList"></el-checkbox>
                    </el-col>
                    <el-col :span="22" v-show="isEmpChange">
                        <el-input v-model="articleData.empName" placeholder="双击选择员工"
                            @dblclick.native="dblclickRangeType('emp')" readonly unselectable="on">
                            <!-- <img slot="suffix" :src="rangeImage" /> -->
                        </el-input>
                    </el-col>
                </div>
            </el-checkbox-group>
        </el-form-item>
        <el-dialog :title="dialogTitle[checkType]" :visible.sync="centerDialogVisible" width="900px"
            :close-on-click-modal="false" @close="handleCancle" center>
            <!-- 单位 -->
            <dept ref="Dept" v-if="checkType == 'dept'" v-model="deptSearch" :deptData="deptData"
                :deptChooseInfoOld="deptChooseInfoOld" @change-depts="(data) => { checkDeptsData = data }">
            </dept>
            <!-- 员工 -->
            <emp ref="emp" v-if="checkType == 'emp'" v-model="empsSearch" :empData="empData" :loading="loading"
                :currentPage="currentPage" :empChooseInfoOld="empChooseInfoOld"
                @choose-emp="(info) => { empChooseInfo = info }" @is-clear-btn="(flag) => { isCancleBtn = flag }"
                @change-page="changeCurentPage">
            </emp>

            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleCancle">取消</el-button>
                <el-button size="small" type="primary" @click="handleConfirm">确定</el-button>
            </span>

        </el-dialog>
    </el-row>
</template>
<script>
// import { registerCoordinateSystem } from "echarts/lib/echarts";
import Emp from "./Scope/staff";
import Dept from "./Scope/secondDept";
import { getStaffList1, getUnitsList } from '@/api/newUsertest'
export default {
    components: {
        // EmpApponit,
        // SecondDeptByTree,
        Emp,
        Dept
    },
    name: 'RangeSelect',
    props: {
        secondshow: {
            type: Boolean,
            default () {
                return true
            }
        }
    },
    data () {
        return {
            articleData: {
                checkList: [], // 公告发布范围选择数组集合
                DeptName: "", // 二级单位名称
                empName: "",
                ordinaryPub: false,
                publishRange: {}
            },
            isDeptShow: false, // 是否显示单位输入
            isEmpChange: false, // 是否显示员工输入
            centerDialogVisible: false, // 弹框是否显示
            checkType: "", // 发布范围点击类型
            dialogTitle: {  // 弹框标题
                secondDept: "指定单位",
                emp: "指定员工"
            },
            empData: {}, // 员工列表接口数据
            empChooseInfo: [], // 员工选择数据
            empsSearch: "", // 员工搜索值
            empChooseInfoOld: [], // 已选择的员工数组（如果是修改界面要根据接口返回进行组装�
            isCancleBtn: false,

            deptData: [], // 所有部门数据
            deptSearch: "", // 二级单位搜索值
            checkDeptsData: [], //部门选择数据
            deptChooseInfoOld: [], // 已选择部门数据
            loading: false, // 员工列表加载
            currentPage: 1,
            timer: ''
        }

    },
    watch: {
        // 员工列表输入框自动搜索
        empsSearch (val) {
            if (this.timer) clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.currentPage = 1;
                this.getStaffInfo(val);
                this.timer = false;
            }, 1200);
        },
    },
    methods: {
        // 点击选择单位
        checkSecondDept (key) {
            this.isDeptShow = key;
            this.centerDialogVisible = key;
            this.checkType = "dept";
            this.articleData.ordinaryPub = false
            this.getDeptInfo(this.deptSearch)
            if (this.deptChooseInfoOld.length && this.$refs.secondDept) {
                this.$refs.Dept.recoverData();
            }

        },
        //点击选择员工
        checkEmp (key) {
            this.isEmpChange = key;
            this.centerDialogVisible = key;
            this.checkType = "emp";
            this.articleData.ordinaryPub = false
            this.getStaffInfo(this.empsSearch);
        },
        // 双击出现弹框
        dblclickRangeType (type) {
            this.checkType = type;
            this.centerDialogVisible = true;
            if (type == "emp") {
                this.getStaffInfo(this.empsSearch)
                // 每次进去的时候执行一下取消还原选中的选项
                if (this.empChooseInfoOld.length && this.$refs.staff) {
                    this.$refs.staff.recoverData();
                }

            } else if (type == "dept") {
                this.getDeptInfo(this.deptSearch)
                console.log(this.deptChooseInfoOld)
                // 每次进去的时候执行一下取消还原选中的选项
                if (this.deptChooseInfoOld.length && this.$refs.Dept) {
                    this.$refs.Dept.recoverData();
                }
            }
        },
        // 获取员工数据
        getStaffInfo (empsSearch) {
            let params = {
                key: empsSearch,
                pageSize: 9,
                currentPage: this.currentPage,
            };
            this.loading = true;
            getStaffList1({ params }).then(res => {
                if (res.code == 20000) {
                    this.empData = res.data
                    this.currentPage = res.data.pagenum
                    this.loading = false;
                }
            })
        },
        // 员工页面改变
        changeCurentPage (curPage) {
            this.currentPage = curPage;
            this.getStaffInfo(this.empsSearch);
        },
        // 获取部门数据
        getDeptInfo (deptSearch) {
            this.loading = true;
            // 部门接口
            getUnitsList({
                UnitName: deptSearch
            }).then(res => {
                if (res.code == 20000) {
                    this.deptData = res.data.unitsList
                    this.loading = false;
                }
            })

        },
        // 取消
        handleCancle () {
            if (this.checkType == "dept") {
                this.$refs.Dept.recoverData();
                this.deptSearch = "";
            } else if (this.checkType == "emp") {
                if (this.empChooseInfoOld) {
                    this.empChooseInfo = [].concat(this.empChooseInfoOld);
                    this.$refs.emp.recoverData();
                }
                this.empsSearch = "";
            }
            this.centerDialogVisible = false;
        },
        // 确定提交
        handleConfirm () {
            if (this.checkType == "emp") {
                this.articleData.empName = ""
                for (let i = 0; i < this.empChooseInfo.length; i++) {
                    this.articleData.empName += `${this.articleData.empName.length ? '，' : ''}${this.empChooseInfo[i].name}`;
                }
                this.articleData.publishRange.emps = this.empChooseInfo

                if (this.empChooseInfo.length || this.isCancleBtn) {
                    this.empChooseInfoOld = this.empChooseInfo;
                }
            }
            this.centerDialogVisible = false;
            if (this.checkType == "dept") {
                this.articleData.DeptName = ""
                for (let i = 0; i < this.checkDeptsData.length; i++) {
                    this.articleData.DeptName += `${this.articleData.DeptName.length ? '，' : ''}${this.checkDeptsData[i].name}`;
                }

                this.articleData.publishRange.depts = this.checkDeptsData
                if (this.checkDeptsData.length) {
                    this.deptChooseInfoOld = this.checkDeptsData;
                }
            }
        },

        // 根据数据显示发布范围
        handleEditPageShow (data) {
            // 知道员工
            if (data.publishRange.emps) {
                this.articleData.checkList.push("指定员工");
                this.isEmpChange = true
                data.publishRange.emps.forEach(item => {
                    this.articleData.empName += item.personName + ","
                });
                this.empChooseInfoOld = data.publishRange.emps //赋值员工数据
                this.articleData.publishRange.emps = data.publishRange.emps
            }

            if (data.ordinaryPub == 1) {
                this.articleData.ordinaryPub = true
            } else {
                this.articleData.ordinaryPub = false
            }

            // 指定单位
            if (data.publishRange.depts) {
                this.articleData.checkList.push("指定单位");
                this.isDeptShow = true
                data.publishRange.depts.forEach(item => {
                    this.articleData.DeptName += `${this.articleData.DeptName.length ? '，' : ''}${item.name}`;
                });
                this.deptChooseInfoOld = data.publishRange.depts //赋值单位数据
            }
        }
    }
}
</script>